<template>

  <div style="line-height: 60px;display:flex; font-size: 12px;">
    <el-dialog
        center
        title="个人信息"
        :visible.sync="dialogVisible"
        width="30%">
      <div style="text-align: center">
        <el-upload
            style="text-align: center"
            class="avatar-uploader"
            :action="'http://'+serverIp+':9090/file/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess">
          <img v-if="avatarUrl" :src="avatarUrl" style="border-radius: 10px;" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <i style="text-align: center;font-size: 8px;color: #8c939d;height: 50px;text-decoration:none;">点击图片修改头像</i>
        <el-form label-width="80px" style="margin-right: 40px">
          <el-form-item label="用户名">
            <el-input v-model="form.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="昵称" >
            <el-input v-model="form.nickname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" >
            <el-input v-model="form.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话" >
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="地址" >
            <el-input type="textarea" v-model="form.address" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center">
          <el-button type="primary" @click="save" style="width: 80%">保 存</el-button>
        </div>
      </div>
    </el-dialog>
    <div style="flex: 1;font-size: 18px">
      <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
    </div>
    <el-dropdown style="width: 150px;cursor:pointer;">
      <div>
        <img :src="user.avatar" alt="" style="width: 30px; height: 30px; border-radius: 50%; position: relative; top: 10px;"/>
        <span style="margin-left: 30px">{{user.nickname}}</span><i style="margin-left: 5px" class="el-icon-arrow-down"></i>
      </div>
      <el-dropdown-menu slot="dropdown" style="width: 100px;text-align: center">
        <el-dropdown-item>
          <a style="text-decoration:none;" @click="show"> 个人信息 </a>
        </el-dropdown-item>
        <el-dropdown-item>
          <span @click="logout" style="text-decoration:none;">退出登录</span>
        </el-dropdown-item>

      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import {serverIp} from "../../public/config";

export default {
  name: "Header",
  props: {
    //Manage中传来的参数
    collapseBtnClass: String,
    collapse: Function
  },
  data() {
    return {
      user:localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{},
      dialogVisible: false,
      form:{},
      avatarUrl:'',
      serverIp:serverIp
    }
  },
  created() {
    let user=JSON.parse(localStorage.getItem("user"))
    if (user.nickname==''||!user.nickname) {
      this.$message.info("初次登录，请完善个人信息")
      this.show()
    }
  },
  methods:{
    //退出登录
    logout() {
      localStorage.removeItem("user")
      this.$router.push("/login")
      this.$message.success("退出成功")
    },
    //显示编辑用户信息弹窗并且将已有信息填入
    show() {
      this.request.get("/user/info/"+this.user.username).then(res=>{
        if (res.code=='200') {
          this.form=res.data
          this.avatarUrl=res.data.avatar
        }
      })
      this.dialogVisible=true
    },
    //保存信息，用户名判重功能待添加
    save() {
      this.request.post("/user",this.form).then(res=>{
        if (res.data) {
          this.user.username=this.form.username
          this.user.nickname=this.form.nickname
          this.user.avatar=this.avatarUrl
          localStorage.setItem("user",JSON.stringify(this.user))
          this.$message.success("保存成功")
          this.dialogVisible=false
        }
        else
          this.$message.error("保存失败")
      })
    },
    //头像上传成功
    handleAvatarSuccess(res) {
      this.avatarUrl=res
      this.form.avatar=res
      this.$message.success("上传成功")
    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
/deep/.el-dialog__body {
  padding: 0px 25px 30px;
}
</style>